<template>
    <div class="show-footer">
        <div class="foot-list">
            <ul>
                <li v-for="(item, index) in footList" :key="index">
                    {{item.li}}
                </li>
            </ul>
        </div>
        <span style="border-bottom: 1px solid #b3b3b6;width:100%;margin: 5px 0;"></span>
        <span>@Copyright {{Year-1}} - {{Year}} 东软电商前台</span>
        <div>
            <span> 东软实训：奇思妙想小组</span>
        </div>
        
    </div>
</template>

<script>
export default {
    data(){
        return{
            footList:[
                {li: '网站首页'},
                {li: '关于我们'},
                {li: '联系我们'},
                {li: '合作伙伴'},
                {li: '服务协议'},
                {li: '帮助中心'},
                {li: '意见反馈'}
            ]
        }
    },
    computed: {
        Year() {
            return new Date().getFullYear()
        }
    }
}
</script>

<style lang="scss" scoped>
.show-footer{
    height: 100px;
    color: #666;
    background-color: rgb(248, 247, 247);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0px -2px 10px  rgba(160, 159, 159, 0.2);;

    font: 14px/1.5 tahoma,arial,Hiragino Sans GB,WenQuanYi Micro Hei,\5FAE\8F6F\96C5\9ED1,\5B8B\4F53,sans-serif;;
}
.foot-list{
    height: 30px;
    ul{
        list-style: none;
        height: inherit;
        // border-bottom: 1px solid #b3b3b6;
        li{
            float: left;
            line-height: 30px;
            padding: 0 10px;
            cursor: pointer;
        }
        li:hover{
            color: #007bff;
        }
    }
}
</style>